import { createRouter, createWebHistory } from 'vue-router'
import { useStatusStore } from '@/stores'
import { Status } from '@/types'
import MainLayout from '@/layouts/MainLayout.vue'
import Dashboard from '@/views/Dashboard.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'root',
      component: MainLayout,
      redirect: '/dashboard',
      children: [
        {
          path: 'dashboard',
          name: 'dashboard',
          component: Dashboard,
        },
        {
          path: 'serverList',
          name: 'serverList',
          component: () => import('@/views/ServerList.vue'),
        },
        {
          path: 'log',
          name: 'log',
          component: () => import('@/views/Log.vue'),
        },
        {
          path: 'user/info',
          name: 'userInfo',
          component: () => import('@/views/User/UserInfo.vue'),
        },
        {
          path: 'server/:id',
          name: 'server',
          redirect: (to) => {
            return { name: 'serverOverview', params: { id: to.params.id } }
          },
          children: [
            {
              path: 'overview',
              name: 'serverOverview',
              component: () => import('@/views/Server/Overview.vue'),
            },
            {
              path: 'network',
              name: 'serverNetwork',
              component: () => import('@/views/Server/Network.vue'),
            },
            {
              path: 'storage',
              name: 'serverStorage',
              component: () => import('@/views/Server/Storage.vue'),
            },
            {
              path: 'service',
              name: 'serverService',
              component: () => import('@/views/Server/Service.vue'),
            },
            {
              path: 'user',
              name: 'serverUser',
              component: () => import('@/views/Server/User.vue'),
            },
            {
              path: 'log',
              name: 'serverLog',
              component: () => import('@/views/Server/Log.vue'),
            },
            {
              path: 'terminal',
              name: 'serverTerminal',
              component: () => import('@/views/Server/Terminal.vue'),
            },
          ],
        },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/User/UserLogin.vue'),
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('@/views/User/UserRegister.vue'),
    },
    {
      path: '/test',
      name: 'test',
      component: () => import('@/components/Test.vue'),
    },
  ],
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const statusStore = useStatusStore()

  if (to.path.startsWith('/server/')) {
    // 当访问以 /server 开头的路由时，修改状态
    statusStore.status = Status.Server
  } else {
    statusStore.status = Status.Dashboard
  }
  // 正则表达式匹配 UUID 格式的 ID
  const match = to.path.match(/\/server\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})/)
  if (match && match[1]) {
    console.log(match[1])

    statusStore.serverList.forEach((element) => {
      if (element.id === match[1]) {
        statusStore.currentServerName = element.name
        statusStore.currentServerId = element.id
        statusStore.currentServerIP = element.ipaddr
      }
    })
  } else {
    statusStore.currentServerName = ''
    statusStore.currentServerId = ''
    statusStore.currentServerIP = ''
  }

  next()
})


export default router
